/* eslint-disable */
// import axios from 'axios'

export default {
  data() {
    return {
      userInput: '',
      usersData: [
        {
          username: 'dede',
          email: '@qq',
          mobile: '123',
          mg_state: true
        }
      ],
      usersTotal: 0,
      pagesize: 2,
      // 当前页
      currentPage: 1,
      // 控制添加用户模态框的显示
      dialogFormVisible: false,
      // 添加模态框相关数据
      form: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      formLabelWidth: '120px',
      // 控制修改用户模态框的显示
      editformVisible: false,
      // 修改模态框相关数据
      editForm: {
        username: '',
        email: '',
        mobile: '',
        id: ''
      },
      // 控制分配角色模态框的显示
      rightsFormVisible: false,
      // 分配角色模态框相关数据
      rightsForm: {
        username: '',
        id: '',
        rid: ''
      },
      // 分配角色模态框的角色列表
      roleList: [],
      // 模态框中被选中的角色id
      selectRoleID: ''
    }
  },
  created() {
    console.log('数据已找到')
    console.log(this.$route)

    // 将页面users传给父组件home以便设置展开

    // 加载用户数据 || 加载的要是url里带参的数据
    this.loadUsersData(this.$route.params.pagenum, this.$route.query.search)
    this.userInput = this.$route.query.search
  },
  methods: {
    async loadUsersData(pagenum = 1, query = '') {
      let data = await this.$axios.get('users', {
        params: {
          query,
          pagenum,
          pagesize: this.pagesize
        }
      })
      ;(res => {
        // console.log(res)

        // 保存从服务器拿到的用户数据
        this.usersData = res.data.data.users
        // 保存从服务器拿到的用户总数
        this.usersTotal = res.data.data.total
        // 保存当前页码
        this.currentPage = res.data.data.pagenum
      })(data)
      // .then(res => {
      //   console.log(res)

      //   // 保存从服务器拿到的用户数据
      //   this.usersData = res.data.data.users
      //   // 保存从服务器拿到的用户总数
      //   this.usersTotal = res.data.data.total
      //   // 保存当前页码
      //   this.currentPage = res.data.data.pagenum
      // })
    },
    // 点击页码的事件处理函数
    clickpage(num) {
      // 传进来的参数是点击的页码的值
      // console.log(num);
      if (this.userInput && this.userInput.trim() !== '') {
        this.loadUsersData(num, this.userInput)
        this.$router.push('/users/' + num + '?search=' + this.userInput)
      } else {
        this.loadUsersData(num)
        // 将页码存到url中
        // console.log(this.$route)

        // 只是会改变地址
        this.$router.push('/users/' + num)
        // console.log(this.$route)
      }
    },
    // 点击搜索按钮处理函数
    search() {
      console.log('搜索被点了')

      console.log(this.$route)

      let res =
        this.$route.fullPath.slice(0, 6) +
        '/' +
        this.currentPage +
        '?search=' +
        this.userInput
      console.log(res)

      this.$router.push(res)

      this.loadUsersData(1, this.userInput)
    },
    // 添加用户模态框点击注册处理函数
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.form)
          alert('submit!')
          // let res = await axios.post(
          //   'http://localhost:8888/api/private/v1/users',
          //   this.form,
          //   {
          //     headers: {
          //       Authorization: localStorage.getItem('token')
          //     }
          //   }
          // )
          // console.log(res)
          this.$axios
            .post('http://localhost:8888/api/private/v1/users', this.form, {
              headers: {
                Authorization: localStorage.getItem('token')
              }
            })
            .then(res => {
              console.log('then里的res', res)
              this.resetForm(formName)
              this.loadUsersData()
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 添加用户模态框点击取消处理函数
    resetForm(formName) {
      console.log('开始重置', formName)
      console.log(this.$refs[formName])

      this.$refs[formName].resetFields()
    },
    // 删除用户
    deleteUser(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete(`http://localhost:8888/api/private/v1/users/${id}`, {
              headers: {
                Authorization: localStorage.getItem('token')
              }
            })
            .then(res => {
              console.log(res)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 刷新列表
              this.loadUsersData()
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      // console.log(res)
      // // 刷新列表
      // this.loadUsersData()
    },
    // 改变用户状态的处理函数
    changeState(row) {
      // console.log(row)
      this.$axios.put(`users/${row.id}/state/${row.mg_state}`).then(res => {
        // console.log(res)
        this.loadUsersData(this.currentPage)
      })
    },
    // 修改用户信息的处理函数
    editUsers(data) {
      console.log('开始修改用户信息')
      this.editformVisible = true
      console.log(data)
      this.editForm.username = data.username
      this.editForm.email = data.email
      this.editForm.mobile = data.mobile
      this.editForm.id = data.id
    },
    // 修改用户信息后并确认的处理函数
    editUsersConfirm(name) {
      console.log('确认修改，要向服务器发送请求了')

      // 先获取form组件校验一下
      this.$refs[name].validate(async res => {
        console.log(res)
        if (res) {
          // 校验成功，发送ajax请求
          let res = await this.$axios.put(`users/${this.editForm.id}`, {
            email: this.editForm.email,
            mobile: this.editForm.mobile
          })
          console.log(res)

          // 关闭修改模态框
          this.editformVisible = false
          // 刷新当前页面
          this.loadUsersData(this.currentPage)
          // 弹出提示修改成功
          this.$message({
            message: '恭喜你，这是一条成功消息',
            type: 'success'
          })
        }
      })
    },
    // 分配角色按钮点击后的处理函数
    async startAssignRights(row) {
      // 显示模态框
      this.rightsFormVisible = true
      console.log(row)
      // username: '',
      // id:
      this.rightsForm.username = row.username
      this.rightsForm.id = row.id

      // 从服务器获取基于用户id的角色id
      let ress = await this.$axios.get(`users/${row.id}`)

      // console.log(ress)
      this.rightsForm.rid = ress.data.data.rid

      // 从服务器获取角色列表
      let res = await this.$axios.get(`roles`)

      // console.log(res)

      this.roleList = res.data.data
      this.selectRoleID = ress.data.data.rid == 0 ? '' : ress.data.data.rid
    },
    // 分配角色模态框点击确定后处理函数
    async confirmAssignRights() {
      let res = await this.$axios.put(`users/${this.rightsForm.id}/role`, {
        rid: this.selectRoleID
      })

      // console.log(res)

      // 关闭模态框
      this.rightsFormVisible = false
      // 刷新当前页
      this.loadUsersData(this.currentPage)
      // 消息提示
      this.$message({
        message: '分配角色成功',
        type: 'success'
      })
    }
  }
}
